{% extends "../layouts/admin.html" %} {% block content %}

<header class="header navbar bg-white shadow">
	<div class="btn-group tool-button">
		<a class="btn btn-primary navbar-btn" href="/taoke/goods/fetch" data-pjax><i class="ti-reload"></i> 同步商品</a>
		 <button class="btn btn-danger navbar-btn" onclick="delCheck()"><i class="ti-close"></i> 删除选中</button>
	</div>

	<div class="pull-right offscreen-right">
		<button class="btn btn-primary navbar-btn" onclick="sublime.toggleFilter('.cd-panel')"><i
          class="fa fa-sliders"></i> 筛选
      </button>
	</div>
</header>
<div class=panel-body style="padding-top: 50px;">
	<div class="table-responsive no-border">

		<table class="table table-bordered table-striped mg-t datatable">
			<thead>
				<tr>
					<th>商品编号</th>
					<th>商品名称</th>
					<th>商品评分</th>
					<th>商品分类</th>
					<th>商品销量</th>
					<th>正常售价</th>
					<th>优惠券</th>
					<th>券后价</th>
					<th>佣金比例</th>
					<th>优惠券剩余数量</th>
					<th>优惠券使用条件</th>
					<th>优惠券到期时间</th>
					<th>操作</th>

		</table>
	</div>
</div>
<div class="cd-panel from-right">
	<header class="cd-panel-header">
		<h4>高级筛选</h4>
	</header>
	<div class="cd-panel-container">
		<div class="cd-panel-content shadow">
			<div class="form-group">
				<label for="keyword">商品关键词</label>
				<input type="text" id="keyword" name="keyword" onclick="this.value=''" class="form-control" placeholder="商品关键词">
			</div>
			<div class="form-group">
				<label for="cid">商品分类</label>
				<select name="cid" id="cid" class="form-control">
					<option value="" selected>分类</option>
					{% for index,item in config.setup.goodsCategory %}
					<option value="{{index}}">{{item}}</option>
					{% endfor %}
				</select>
			</div>

			<button id="searchBtn" type="button" class="btn btn-default">查询</button>
		</div>
	</div>
</div>

<!-- 删除商品 -->
<div id="dialogDelete" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">删除商品</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12">
            商品删除后无法恢复，确定删除吗？ <br/>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
        <button id="ok" type="button" class="btn btn-primary" data-loading-text="正在删除...">确 定</button>
      </div>
    </div>
  </div>
</div>
<!-- 删除选中商品 -->
<div id="dialogDeleteCheck" class="modal fade bs-modal-lg" tabindex="-2" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">删除商品</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12 mb10">
            商品删除后无法恢复，确定删除已选商品吗？
          </div>
          <div class="col-xs-12">
            <ul id="checkedUser" class="list-group"></ul>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
        <button id="ok" type="button" class="btn btn-primary" data-loading-text="正在删除...">确 定</button>
      </div>
    </div>
  </div>
</div>

<script language="JavaScript">
	var datatable;

	function initDatatable() {
		datatable = $('.datatable').DataTable({
			"dom": '<"toolbar">frtip',
			"searching": false,
			"processing": false,
			"serverSide": true,
			"select": true,

			"ordering": true,
			"language": {
				"url": "/assets/plugins/datatables/cn.json"
			},
			"preDrawCallback": function() {
				sublime.showLoadingbar($(".main-content"));
			},
			"drawCallback": function() {
				sublime.closeLoadingbar($(".main-content"));
			},
			"ajax": {
				"url": "/taoke/goods/index",
				"type": "post",
				"data": function(d) {
					d.cid = $('#cid').val();
					d.keyword = $('#keyword').val();
				}
			},
			"order": [[11, "desc"]],

			"columns": [{
					"data": "goods_id",
					"bSortable": true
				}, {
					"data": "title",
					"bSortable": true
				},
				{
					"data": "score",
					"bSortable": true
				},
				{
					"data": "cid",
					"bSortable": true
				},
				{
					"data": "sales_num",
					"bSortable": true
				},
				{
					"data": "org_price",
					"bSortable": true
				},
				{
					"data": "quan_price",
					"bSortable": true
				},
				{
					"data": "price",
					"bSortable": true
				},

				{
					"data": "commission",
					"bSortable": true
				},

				{
					"data": "quan_surplus",
					"bSortable": true
				},
				{
					"data": "quan_condition",
					"bSortable": true
				},
				{
					"data": "quan_time",
					"bSortable": true
				}
			],
			"columnDefs": [{
				"render": function(data, type, row) {
					return '<div class="btn-group"><button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">' +
						' <i class="ti-settings"></i> <span class="ti-angle-down"></span></button><ul class="dropdown-menu" role="menu">' +
						'<li><a href="javascript:;" onclick="del(' + row.id + ')">删除</a></li>' +
						'</ul></div>';
				},
				"targets": 12
			},{
				"render": function(data, type, row) {
						let goodsCategory = {{	config.setup.goodsCategory | stringify | safe	}};

						return goodsCategory[data];
				},
				"targets": 3
			}]
		});
		datatable.on('click', 'tr', function() {
			$(this).toggleClass('selected');
		});

		$("#searchBtn").on('click', function() {
			datatable.ajax.reload();
		});

	}
	var selected = [];

	function del(id) {
		var dialog = $("#dialogDelete");
		dialog.modal("show");
		dialog.find("#ok").unbind("click");
		dialog.find("#ok").bind("click", function(event) {
			var btn = $(this);
			btn.button("loading");
			$.post("/taoke/goods/delete", {
				id: id
			}, function(data) {
				if(data.errno == 0) {
					datatable.ajax.reload(null, false);
				} else {
					Toast.error(data.errmsg);
				}
				//重置按钮状态，关闭提示框
				btn.button("reset");
				dialog.modal("hide");
			}, "json");
		});
	}

	function delCheck() {
		var chks = datatable.rows('.selected').data();
		if(chks.length > 0) {
			var ids = [];
			$.each(datatable.rows('.selected').data(), function(i, n) {
				ids.push(n.id);
			});
			var dialog = $("#dialogDeleteCheck");
			dialog.modal("show");
			dialog.find("#ok").unbind("click");
			dialog.find("#ok").bind("click", function(event) {
				var btn = $(this);
				btn.button("loading");

				$.post("/taoke/goods/delete", {
					"id": ids
				}, function(data) {
					if(data.errno == 0) {
						datatable.ajax.reload(null, false);
					} else {
						Toast.error(data.errmsg);
					}
					btn.button("reset");
					dialog.modal("hide");
				}, "json");
			});
		} else {
			Toast.warning("请先选择要删除的商品！");
		}
	}

	$(function() {
		initDatatable();
	});
</script>
{% endblock %}